<template>
    <div class="jqj_wrap">
        <div class="page-content">

            <div class="top-panel">
                <div class="panel-item">
                    <div class="panel-title">氢气浓度探测（%）</div>
                    <div class="panel-content">
                        <div class="list-item">
                           <span class="list-item-label">卸车柱</span>
                            <!--1-->
                           <span class="list-item-num">{{ valveState[16442] | formatFlowValue }}</span>
                        </div>
                        <div class="list-item">
                           <span class="list-item-label">阀组区</span>
                            <!--4-->
                           <span class="list-item-num">{{ valveState[16443] | formatFlowValue }}</span>
                        </div>
                        <div class="list-item">
                           <span class="list-item-label">1#加氢机</span>
                            <!--2-->
                           <span class="list-item-num">{{ valveState[16442] | formatFlowValue }}</span>
                        </div>
                        <div class="list-item">
                           <span class="list-item-label">储氢瓶</span>
                            <!--5-->
                           <span class="list-item-num">{{ valveState[16443] | formatFlowValue }}</span>
                        </div>
                        <div class="list-item">
                           <span class="list-item-label">压缩机外</span>
                            <!--3-->
                           <span class="list-item-num">{{ valveState[16442] | formatFlowValue }}</span>
                        </div>
                    </div>
                </div>

                <div class="panel-item">
                    <div class="panel-title">紧急停止被按下</div>
                    <div class="panel-content">
                        <div class="btn-item is_hover" @click="btnClick()">
                            <span class="btn-item-txt">站空柜紧急停止</span>
                            <!--6-->
                            <span :class="`btn-item-icon ${ valveState[27] ? '' : 'is_red' }`"></span>
                        </div>
                        <div class="btn-item is_hover" @click="btnClick()">
                            <span class="btn-item-txt">卸车紧急停止</span>
                            <!--8-->
                            <span :class="`btn-item-icon ${ valveState[29] ? '' : 'is_red' }`"></span>
                        </div>
                        <div class="btn-item is_hover" @click="btnClick()">
                            <span class="btn-item-txt">1#加氢机紧急停止</span>
                            <!--7-->
                            <span :class="`btn-item-icon ${ valveState[28] ? '' : 'is_red' }`"></span>
                        </div>
                    </div>
                </div>

                <div class="panel-item">
                    <div class="panel-title">火焰报警</div>
                    <div class="panel-content">
                        <div class="alert-box">
                            <div class="alert-item">
                                <span class="alert-item-text">阀组后端</span>
                                <!--9-->
                                <span :class="`alert-item-icon ${ valveState[1]?'is_red': '' }`"></span>
                            </div>
                            <div class="alert-item">
                                <span class="alert-item-text">储罐后端</span>
                                <!--11-->
                                <span :class="`alert-item-icon ${ valveState[3]?'is_red': '' }`"></span>
                            </div>
                            <div class="alert-item">
                                <span class="alert-item-text">压缩机后</span>
                                <!--13-->
                                <span :class="`alert-item-icon ${ valveState[5]?'is_red': '' }`"></span>
                            </div>
                            <div class="alert-item">
                                <span class="alert-item-text">卸气柱后</span>
                                <!--10-->
                                <span :class="`alert-item-icon ${ valveState[2]?'is_red': '' }`"></span>
                            </div>
                            <div class="alert-item">
                                <span class="alert-item-text">压缩机前</span>
                                <!--12-->
                                <span :class="`alert-item-icon ${ valveState[4]?'is_red': '' }`"></span>
                            </div>
                            <div class="alert-item">
                                <span class="alert-item-text">1#加氢机</span>
                                <!--14-->
                                <span :class="`alert-item-icon ${ valveState[6]?'is_red': '' }`"></span>
                            </div>
                        </div>
                        <div class="btn-box">
                            <!--15-->
                            <el-button class="hy_btn " type="danger" plain @click="btnClick()" :disabled="!!valveState[1000]">故障复位</el-button>
                            <span></span>
                            <!--16-->
                            <el-button type="danger" @click="btnClick()" :disabled="!!valveState[1001]">紧急停止</el-button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="middle-panel">

                <div class="panel-item">
                    <div class="panel-title">加氢站工作信息</div>
                    <div class="panel-content">
                        <div class="unit-price">
                            <span>单价</span>
                            <!--17-->
                            <span class="item-value">{{ valveState[16442] | formatFlowValue }}</span>
                            <span>元/KG</span>
                        </div>

                        <!--18-->
                        <el-button type="primary" @click="btnClick()" :disabled="!!valveState[1002]">1#加氢机授权</el-button>
                        <br/>
                        <!--19-->
                        <el-button type="danger" plain @click="btnClick()" :disabled="!!valveState[1003]">故障复位</el-button>
                    </div>
                </div>

                <div class="panel-item">
                    <div class="panel-title">1#加氢机参数设置</div>
                    <div class="panel-content">
                        <div class="table-box">
                            <div class="table-head">
                                <div class="table-head-item">运行</div>
                                <div class="table-head-item">
                                    <el-input class="item-value" v-model="value" placeholder=""></el-input>
                                    <span style="margin-right: 30px">时</span>
                                    <el-input class="item-value" v-model="value" placeholder=""></el-input>
                                    <span>分</span>
                                </div>
                            </div>

                            <div class="table-body">
                                <div class="table-tr">
                                    <span>启动</span>
                                    <span>0.00</span>
                                    <span>提大枪</span>
                                    <span>停止</span>
                                    <span>0</span>
                                    <span>提小枪</span>
                                </div>
                                <div class="table-tr">
                                    <span>氢气探测</span>
                                    <span>0.00</span>
                                    <span>LEL</span>
                                    <span>环境温度</span>
                                    <span>-50.00</span>
                                    <span>°C</span>
                                </div>
                                <div class="table-tr">
                                    <span>枪口压力</span>
                                    <span>0.00</span>
                                    <span>MPa</span>
                                    <span>初始压力</span>
                                    <span>0.00</span>
                                    <span>MPa</span>
                                </div>
                                <div class="table-tr">
                                    <span>结束压力</span>
                                    <span>0.00</span>
                                    <span>MPa</span>
                                    <span>加注流量</span>
                                    <span>0.000</span>
                                    <span>kg/min</span>
                                </div>
                                <div class="table-tr">
                                    <span>加气质量</span>
                                    <span>0.000</span>
                                    <span>kg</span>
                                    <span>加注金额</span>
                                    <span>0.00</span>
                                    <span>元</span>
                                </div>
                            </div>
                        </div>

                        <div class="table-box">
                            <div class="btn-row">
                                <span class="is_hover" @click="btnClick()">压力模式</span>
                                <el-input class="item-value" v-model="value" placeholder=""></el-input>
                                <span class="is_hover is_act" @click="btnClick()">大巴加注模式</span>
                            </div>
                            <div class="btn-row">
                                <span class="is_hover" @click="btnClick()">金额模式</span>
                                <el-input class="item-value" v-model="value" placeholder=""></el-input>
                                <span class="is_hover" @click="btnClick()">小车加注模式</span>
                            </div>
                            <div class="btn-row">
                                <span class="is_hover" @click="btnClick()">质量模式</span>
                                <el-input class="item-value" v-model="value" placeholder=""></el-input>
                                <span class="is_hover" @click="btnClick()">流量车加注模式</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bottom-panel">
                <div class="chart-box">
                    <div class="chart-item" ref="lineChart1"></div>
                    <div class="chart-item" ref="lineChart2"></div>
                </div>

                <div class="table-box">
                    <el-table
                            :data="tableData"
                            class="hy_table"
                     >
                        <el-table-column
                                type="index"
                                label="No."
                                align="center"
                                width="140px">
                        </el-table-column>
                        <el-table-column
                                prop="date"
                                label="时间">
                            <template slot-scope="scope">
                                <span>{{ scope.row.timeStamp | formatNowDate }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="p_start"
                                label="起始压力">
                        </el-table-column>
                        <el-table-column
                                prop="p_end"
                                label="结束压力">
                        </el-table-column>
                        <el-table-column
                                prop="quality"
                                label="加氢质量">
                        </el-table-column>
                        <el-table-column
                                prop="amount"
                                label="加注金额">
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <ControlDialog ref="controlDialog"
                           :dialogTitle="dialogTitle"
            ></ControlDialog>
        </div>
    </div>
</template>

<script>
    import ControlDialog from '../ControlDialog';

    export default {
        components: {
            ControlDialog,
        },
        data() {
            return {
                value: '0.00',
                tableData: [],
                dialogTitle: '控制类弹窗',
                valveState: {},
            }
        },
        methods: {

            getData() {
                this.$api.queryTempquery(
                    [
                        {
                            target: 'h2-01',
                            address: [
                                16442,
                                16443,
                                16442,
                                16443,
                                16442,
                                1,
                                2,
                                3,
                                4,
                                5,
                                6,
                                16442,
                                27,
                                28,
                                29,
                                1000,
                                1001,
                                1002,
                                1003,
                            ],
                        },
                    ]
                ).then(( res )=> {
                    var obj = {};

                    for( var j=0; j<res.length; j++ ) {
                        var data = res[j].result || [];

                        for( var i=0; i<data.length; i++ ) {
                            obj[ data[i].address ] = data[i].value;
                        }
                    }

                    this.valveState = obj;
                    console.log("res==>",obj)
                })
            },

            /**
             * 获取折线图数据
             */
            getLineChartData( obj ) {
                this.$api.queryCharts(
                    {
                        Name: obj.name,
                        selector: 'MEAN',
                        begin: this.formatDate( 'YYYY-mm-dd', new Date() ) + ' 00:00:00',
                        end: this.formatDate( 'YYYY-mm-dd HH:MM:SS', new Date() ),
                        groupBlock: '15m',
                    }
                ).then(( res )=> {
                    var names = [];
                    var value = [];
                    var data = res.data;

                    for( var i=0; i<data.length; i++ ) {
                        names.push( this.formatDate( 'HH:MM', new Date( data[i][0] ) ) );
                        value.push( parseInt( data[i][1] ) );
                    }

                    this.chartLoad(
                        {
                            names: names,
                            value: value,
                            id: obj.id,
                            title: obj.title,
                        }
                    );
                }).catch(( err )=> {

                })
            },

            /**
             * 获取日志数据
             */
            getLogData() {
                this.$api.queryGeneralLog(
                    {
                        "target": "H2_dispenser",
                        "num": 10
                    }
                ).then(( res )=> {
                    console.log("getLogData==>",res);
                    var arr = [];
                    var data = res.results || [];

                    for( var i=0; i<data.length; i++ ) {
                        data[i].amount = data[i].content.amount;
                        data[i].p_end = data[i].content.p_end;
                        data[i].p_start = data[i].content.p_start;
                        data[i].quality = data[i].content.quality;
                    }
                    this.tableData = data;
                })
            },

            chartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[obj.id] );

                var option = {
                    title: {
                        text: obj.title,
                        left: '3%',
                        textStyle: {
                            color: '#333333',
                            fontSize: 16,
                        }
                    },
                    grid: {
                        top: '17%',
                        right: '5%',
                        bottom: '10%',
                        left: '4%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}:{c}',
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#243753',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data: obj.names,
                        },
                    ],
                    yAxis: [
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: '',
                            type: 'line',
                            smooth: true,
                            showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#2C50EE',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(44,80,238,0.1)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(44,80,238,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value,
                        },
                    ],
                };

                chart.setOption( option );
            },

            btnClick() {
                this.$refs.controlDialog.dialogVisible = true;
            },
        },
        mounted() {
            this.getData();
            this.getLogData();

            /*20*/
            this.getLineChartData(
                {
                    id: 'lineChart1',
                    title: '加氢次数统计（次）',
                    name: 'h2-01_pv_power',
                }
            );

            /*21*/
            this.getLineChartData(
                {
                    id: 'lineChart2',
                    title: '加氢总质量（kg）',
                    name: 'h2-01_pv_power',
                }
            );
        }
    }
</script>

<style lang="less">
    .jqj_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            padding-bottom: 28px;

            >.top-panel {
                height: 280px;
                width: 100%;
                margin-bottom: 28px;

                >.panel-item {
                    display: inline-block;
                    vertical-align: top;
                    width: 360px;
                    height: 100%;
                    background: #FFFFFF;
                    border-radius: 8px;
                    margin-right: 28px;
                    padding: 40px;
                    box-sizing: border-box;

                    &:nth-of-type( 1 ) {

                        .panel-content {
                            padding-top: 35px;
                        }

                        .list-item {
                            display: inline-block;
                            vertical-align: top;
                            width: 50%;
                            line-height: 30px;
                            margin-bottom: 26px;

                            >.list-item-label {
                                display: inline-block;
                                width: 70px;
                                vertical-align: top;
                                font-size: 14px;
                                color: #0E1526;
                            }

                            >.list-item-num {
                                display: inline-block;
                                vertical-align: top;
                                font-size: 20px;
                                color: #0E1526;
                                font-weight: 600;
                            }
                        }
                    }

                    &:nth-of-type( 2 ) {
                        width: 500px;

                        .panel-content {
                            padding-top: 38px;

                            >.btn-item {
                                display: inline-block;
                                vertical-align: top;
                                width: 180px;
                                height: 50px;
                                line-height: 48px;
                                background: #FFFFFF;
                                border-radius: 6px;
                                border: 1px solid #CFD1D8;
                                box-sizing: border-box;
                                margin-right: 40px;
                                margin-left: 10px;
                                text-align: center;
                                margin-bottom: 32px;

                                .btn-item-txt {
                                    display: inline-block;
                                    vertical-align: middle;
                                    font-size: 14px;
                                    color: #0E1526;
                                }

                                .btn-item-icon {
                                    display: inline-block;
                                    vertical-align: middle;
                                    width: 24px;
                                    height: 24px;
                                    background-image: url("../../assets/images/jqj/icon_circle.png");
                                    background-size: 100% 100%;
                                    margin-left: 8px;

                                    &.is_red {
                                        background-image: url("../../assets/images/jqj/icon_circle_red.png");
                                    }
                                }

                                &:nth-of-type( 2n ) {
                                    margin-right: 0;
                                }
                            }
                        }

                    }

                    &:nth-of-type( 3 ) {
                        width: calc( 100% - 360px - 500px - 28px - 28px );
                        margin-right: 0;

                        .panel-content {
                            padding-top: 38px;

                            >.alert-box {
                                display: inline-block;
                                vertical-align: top;
                                width: 464px;

                                >.alert-item {
                                    line-height: 40px;
                                    width: calc( 100% / 3 );
                                    display: inline-block;
                                    vertical-align: top;
                                    font-size: 14px;
                                    color: #333333;
                                    padding-left: 8px;
                                    box-sizing: border-box;
                                    margin-bottom: 32px;

                                    .alert-item-icon {
                                        display: inline-block;
                                        vertical-align: middle;
                                        width: 28px;
                                        height: 28px;
                                        background-image: url("../../assets/images/jqj/icon_circle_1.png");
                                        background-size: 100% 100%;
                                        margin-left: 8px;

                                        &.is_red {
                                            background-image: url("../../assets/images/jqj/icon_circle_2.png");

                                        }
                                    }
                                }
                            }

                            >.btn-box {
                                display: inline-block;
                                vertical-align: top;
                                width: calc( 100% - 464px );

                                .el-button {
                                    width: 100px;
                                    padding-left: 0;
                                    padding-right: 0;
                                    margin-bottom: 32px;
                                }
                            }
                        }
                    }
                }
            }



            >.middle-panel {
                height: 412px;
                width: 100%;
                margin-bottom: 28px;

                >.panel-item {
                    display: inline-block;
                    vertical-align: top;
                    width: 360px;
                    height: 100%;
                    background: #FFFFFF;
                    border-radius: 8px;
                    margin-right: 28px;
                    padding: 40px;
                    box-sizing: border-box;

                    &:nth-of-type( 1 ) {

                        .panel-content {
                            text-align: center;
                            padding-top: 45px;

                            .unit-price {
                                font-size: 16px;
                                color: #333333;
                                line-height: 50px;
                                margin-bottom: 44px;

                                >span:nth-of-type( 1 ) {
                                    font-weight: 600;
                                }

                                >span {
                                    display: inline-block;
                                    vertical-align: top;
                                }

                                >.item-value {
                                    width: 124px;
                                    height: 50px;
                                    margin: 0 8px;
                                    background-color: #F9FAFE;
                                    border-radius: 4px;
                                    border: 1px solid #CFD1D8;
                                    line-height: 48px;
                                    font-size: 28px;
                                    font-weight: 600;
                                    color: #333333;
                                    text-align: center;
                                }

                                .el-input {
                                    width: 124px;
                                    height: 50px;
                                    margin: 0 8px;

                                    .el-input__inner {
                                        background-color: #F9FAFE;
                                        border-radius: 4px;
                                        border: 1px solid #CFD1D8;
                                        height: 50px;
                                        line-height: 48px;
                                        font-size: 28px;
                                        font-weight: 600;
                                        color: #333333;
                                        text-align: center;
                                    }
                                }
                            }

                            .el-button {
                                width: 220px;
                                height: 60px;
                                border-radius: 6px;
                                margin-bottom: 30px;

                                >span {
                                    font-size: 18px;
                                }
                            }
                        }
                    }

                    &:nth-of-type( 2 ) {
                        width: calc( 100% - 360px - 28px );
                        margin-right: 0;

                        >.panel-content {
                            height: 280px;
                            margin-top: 30px;
                            padding-left: 76px;
                            box-sizing: border-box;
                            background-image: url("../../assets/images/jqj/bg_table.png");
                            background-repeat: no-repeat;

                            >.table-box {
                                width: 560px;
                                height: 100%;
                                margin-right: 28px;
                                display: inline-block;
                                vertical-align: top;
                                border-radius: 4px;
                                border: 1px solid #CFD1D8;
                                box-sizing: border-box;

                                >.table-head {
                                    height: 50px;
                                    line-height: 50px;
                                    background-color: #F9FAFE;
                                    display: flex;
                                    text-align: center;
                                    font-size: 16px;
                                    font-weight: 600;
                                    color: #333333;

                                    >.table-head-item {
                                        flex: 1;

                                        .el-input {
                                            vertical-align: top;
                                            width: 56px;
                                            height: 40px;
                                            margin-right: 13px;
                                            position: relative;
                                            top: -2px;

                                            .el-input__inner {
                                                background-color: #ffffff;
                                                border-radius: 4px;
                                                border: 1px solid #CFD1D8;
                                                height: 40px;
                                                line-height: 38px;
                                                font-size: 20px;
                                                font-weight: 600;
                                                color: #333333;
                                                text-align: center;
                                                padding: 0;
                                            }
                                        }

                                        &:first-child {
                                            border-right: 1px solid rgba(207, 209, 216, 0.51);
                                        }
                                    }
                                }

                                >.table-body {
                                    width: 100%;
                                    height: calc( 100% - 50px );

                                    >.table-tr {
                                        width: 100%;
                                        height: 46px;
                                        line-height: 45px;
                                        display: flex;

                                        >span {
                                            flex: 1;
                                            padding-left: 12px;
                                            border-top: 1px solid #EEEFF2;
                                            border-right: 1px solid #EEEFF2;
                                            font-size: 14px;
                                            color: #333333;

                                            &:last-child {
                                                border-right: 0;
                                            }
                                        }
                                    }
                                }

                                &:last-child {
                                    width: calc( 100% - 560px - 28px );
                                    margin-right: 0;
                                    padding: 35px 25px;
                                    box-sizing: border-box;

                                    >.btn-row {
                                        width: 100%;
                                        height: 50px;
                                        line-height: 48px;
                                        margin-bottom: 30px;

                                        >span {
                                            display: inline-block;
                                            vertical-align: top;
                                            width: 136px;
                                            height: 50px;
                                            background: #FFFFFF;
                                            border-radius: 4px;
                                            border: 1px solid #CFD1D8;
                                            text-align: center;
                                            font-size: 14px;
                                            font-weight: 600;
                                            color: #0E1526;
                                            box-sizing: border-box;

                                            &.is_act {
                                                background-color: #2C50EE;
                                                color: #FFFFFF;
                                            }
                                        }

                                        .el-input {
                                            width: calc( 100% - 136px - 136px - 40px );
                                            margin: 0 20px;

                                            .el-input__inner {
                                                background-color: #F9FAFE;
                                                border-radius: 4px;
                                                border: 1px solid #CFD1D8;
                                                height: 50px;
                                                line-height: 48px;
                                                font-size: 24px;
                                                font-weight: 600;
                                                color: #333333;
                                                text-align: center;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }



            >.bottom-panel {
                min-height: 960px;
                width: 100%;
                background: #FFFFFF;
                border-radius: 8px;
                padding: 40px;
                box-sizing: border-box;

                .chart-box {
                    width: 100%;
                    height: 360px;
                    border-bottom: 2px solid #EEEFF2;
                    box-sizing: border-box;
                    margin-bottom: 59px;

                    >.chart-item {
                        display: inline-block;
                        vertical-align: top;
                        width: 50%;
                        height: 100%;
                    }
                }

                .table-box {
                    width: 100%;
                    /*height: calc( 100% - 360px - 59px );*/
                    min-height: 470px;
                }
            }
        }
    }
</style>
